import React, { Component } from 'react';
class NoCtrlDemo extends Component {
    // 1.0 通过Reat.createRef() 方法创建一个非受控变量
    txtRef = React.createRef()
    
    state = {}
    getValue = () => { 
        // 3.0 通过this.txtRef.current 操作表单元素
        // console.log(this.txtRef.current.value);
        this.txtRef.current.value = '59期小伙伴'
        // document.getElementById('txt').value = '59期小伙伴'
        // this.txtRef.current  等价于  document.getElementById('txt')        
    }

    render() { 
        return (<div>

{/* 2.0 将非受控变量与表单元素进行绑定 */}
            <input id="txt" type="text" ref={ this.txtRef }  /> <br />
            <button onClick={ this.getValue}> 获取文本框的值</button>

        </div> );
    }
}
 
export default NoCtrlDemo;